<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainConBox">
      <div class="filterBox">
        <el-row class="searchInputWidth">
          <el-form :inline="true" :model="filterField">
            <div class="eformTitle">筛选项目</div>
            <div class="baseSearch">
              <div class="baseSearchTitle">基本筛选</div>
              <div class="baseSearchBox">
                <el-form-item label="" class="row-padding-bottom">
                  <el-input
                    v-model="filterField.projectName"
                    placeholder="请输入项目名称"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-cascader
                    ref="manageArea"
                    v-model="areaId"
                    :options="areasOptions"
                    @change="getAreaId"
                    clearable
                    filterable
                    :props="{ checkStrictly: true }"
                    placeholder="请选择区域"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <!-- <el-cascader ref="industry" v-model="industryId" :options="industryOptions" @change="getIndustryId" clearable filterable :props="{ checkStrictly: true }"></el-cascader> -->
                  <el-select
                    class="selectWidth"
                    v-model="filterField.industryId"
                    filterable
                    placeholder="请选择行业"
                    clearable
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.status"
                    class="baseSearchItem"
                    placeholder="请选择开工状态"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-select
                    placeholder="请选择投资类别"
                    v-model="filterField.investment"
                    class="baseSearchItem"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in investmentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <!-- <el-select  placeholder="请选择项目清洗" v-model="filterField.cleanId" class="baseSearchItem" clearable filterable>
                                        <el-option
                                            v-for="item in washtypeOptions"
                                            :key="item.id"
                                            :label="item.text"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select> -->
                  <el-select
                    placeholder="是否参与项目评价"
                    v-model="filterField.isParticipated"
                    class="baseSearchItem"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in projectEvaluationArr"
                      :key="item.id"
                      :label="item.text"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getStartTimeValue"
                    @getEndTimeValue="getEndTimeValue"
                    :startTimeTitle="startTimeTitle"
                    :endTimeTitle="endTimeTitle"
                  ></timeSelection>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getStartTimeValueTwo"
                    @getEndTimeValue="getEndTimeValueTwo"
                    :startTimeTitle="startTimeTitleTwo"
                    :endTimeTitle="endTimeTitleTwo"
                  ></timeSelection>
                </el-form-item>
              </div>
            </div>
            <div class="moreSearch">
              <div class="moreSearchTitle">条件筛选</div>
              <div class="clearfix">
                <div class="cable fl" v-if="paramsList.length > 1">
                  <span @click="changeAndOr">{{ andOr }}</span>
                </div>
                <div
                  :class="[
                    { mL: paramsList.length > 1 },
                    'fl',
                    'moreSearchBox',
                  ]"
                >
                  <div
                    v-for="(item, index) in paramsList"
                    :key="index"
                    class="moreSearchList clearfix"
                  >
                    <el-form-item label="" class="row-padding-bottom fl">
                      <el-select
                        v-model="item.name"
                        class="moreSearchListLeft"
                        @change="changeOrder(item)"
                        placeholder="请选择"
                        filterable
                      >
                        <el-option
                          v-for="(items, indexs) in orderList.filter((obj) => {
                            return obj.isCheck
                          })"
                          :key="indexs"
                          :label="items.name"
                          :value="items.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <div
                      v-if="
                        item.code !== 'last_punch_time' &&
                        item.code !== 'last_create_salary_table_date' &&
                        item.code !== 'last_salary_arrive_date'
                      "
                    >
                      <el-form-item
                        label=""
                        class="row-padding-bottom fl mLTen"
                        v-if="item.valueType == 'between'"
                      >
                        <el-input
                          class="moreSearchListNum"
                          placeholder="输入数值"
                          v-model="item.minValue"
                          clearable
                          oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d).*$/,'$1$2.$3')}"
                          v-if="item.code == 'ps_employee_number_scale'"
                        >
                          <i slot="suffix" style="margin-right: 10px">%</i>
                        </el-input>
                        <el-input
                          class="moreSearchListNum"
                          placeholder="输入数值"
                          v-model="item.minValue"
                          clearable
                          oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')}"
                          v-else
                        >
                        </el-input>
                      </el-form-item>
                      <!-- <span class = "fl unitSty">%</span> -->
                      <el-form-item
                        label=""
                        class="row-padding-bottom fl rangeWidth mLTen"
                        v-if="item.valueType == 'between'"
                      >
                        <el-select v-model="item.minValueCompareType">
                          <el-option label="＜" value="0"></el-option>
                          <el-option label="≤" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label=""
                        class="row-padding-bottom fl mLTen"
                        v-if="item.valueType == 'between'"
                      >
                        <span>范围</span>
                      </el-form-item>
                      <el-form-item
                        label=""
                        class="row-padding-bottom fl rangeWidth mLTen"
                        v-if="item.valueType == 'between'"
                      >
                        <el-select v-model="item.maxValueCompareType">
                          <el-option label="＜" value="0"></el-option>
                          <el-option label="≤" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label=""
                        class="row-padding-bottom fl mLTen"
                        v-if="item.valueType == 'between'"
                      >
                        <el-input
                          class="moreSearchListNum"
                          placeholder="输入数值"
                          v-model="item.maxValue"
                          clearable
                          oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d).*$/,'$1$2.$3')}"
                          v-if="item.code == 'ps_employee_number_scale'"
                        >
                          <i slot="suffix" style="margin-right: 10px">%</i>
                        </el-input>
                        <el-input
                          class="moreSearchListNum"
                          placeholder="输入数值"
                          v-model="item.maxValue"
                          clearable
                          oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')}"
                          v-else
                        >
                        </el-input
                        ><!--限制只能输入正整数且保留两位小数-->
                      </el-form-item>
                      <!-- <span class = "fl unitSty">%</span> -->
                    </div>

                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-if="item.valueType == 'select' && item.code == 'is_ps'"
                      style="margin-left: 25px"
                    >
                      <el-select
                        v-model="item.value"
                        placeholder="请选择"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in isSetup"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-if="item.valueType == 'select' && item.code == 'is_sa'"
                      style="margin-left: 25px"
                    >
                      <el-select
                        v-model="item.value"
                        placeholder="请选择"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in isOpenData"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-if="
                        item.valueType == 'select' &&
                        item.code == 'is_equip_att_machine'
                      "
                      style="margin-left: 25px"
                    >
                      <el-select
                        v-model="item.value"
                        placeholder="请选择"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in isEquip"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <!-- 专户是否签约 -->
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-if="
                        item.valueType == 'select' && item.code == 'is_signed'
                      "
                      style="margin-left: 25px"
                    >
                      <el-select
                        v-model="item.value"
                        placeholder="请选择"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in isSignedData"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <!-- 缴纳状态 -->
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-if="item.valueType == 'in' && item.code == 'status'"
                      style="margin-left: 25px"
                    >
                      <el-select
                        v-model="item.value"
                        placeholder="请选择(可多选)"
                        clearable
                        filterable
                        multiple
                        class="multipleWidth"
                      >
                        <el-option
                          v-for="(item, index) in paymentStatus"
                          :key="index"
                          :label="item.name"
                          :value="item.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <!-- 日期类型的 -->
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-show="item.code == 'last_punch_time'"
                      style="margin-left: 25px"
                    >
                      <timeSelection
                        :dateTypes="`date`"
                        @getStartTimeValue="getStartTimeItem($event, index)"
                        @getEndTimeValue="getEndTimeItem($event, index)"
                        :startTimeTitle="item.minValue"
                        :endTimeTitle="item.maxValue"
                      ></timeSelection>
                    </el-form-item>
                    <el-form-item
                      label=""
                      class="row-padding-bottom fl mLTen"
                      v-show="
                        item.code == 'last_create_salary_table_date' ||
                        item.code == 'last_salary_arrive_date'
                      "
                      style="margin-left: 25px"
                    >
                      <timeSelection
                        :dateTypes="`month`"
                        @getStartTimeValue="getStartTimeItem($event, index)"
                        @getEndTimeValue="getEndTimeItem($event, index)"
                        :startTimeTitle="item.minValue"
                        :endTimeTitle="item.maxValue"
                      ></timeSelection>
                    </el-form-item>
                    <span class="buttonBox">
                      <el-link typr="primary" @click="del(index, item.id)"
                        >删除</el-link
                      >
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div :class="[{ boxTop: paramsList.length > 0 }, 'actionBox']">
              <el-button
                type="text"
                class="actionBoxAdd"
                icon="el-icon-plus"
                @click="addParams"
                v-show="isShowAdd"
                >新增</el-button
              >
              <el-form-item class="searchBut">
                <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 20210423 -->
      <!-- <div> -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        type="card"
        class="commonTab"
      >
        <el-tab-pane label="详细情况" name="first"></el-tab-pane>
        <el-tab-pane label="项目分布" name="second"></el-tab-pane>
      </el-tabs>
      <!-- </div> -->
      <!-- 详细情况 -->
      <div class="proDetailsListBox" v-show="activeName == 'first'">
        <div class="colSetupBottom">
          <colSetup
            :tableColList="colSetupTableCol"
            @getSelectMenuId="getSelectMenuIdarr"
            :mark="mark"
          ></colSetup>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="getExportList"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          stripe
          ref="tableBox1"
          highlight-current-row
          :max-height="tableHeight"
          @sort-change="sortChange"
          border
          @header-dragend="handleDragend"
        >
          <!-- <el-table-column
                        :prop="item.prop"
                        align="left"
                        :formatter="formatTd"
                        v-for="(item) in filterHeaderList"
                        :key="item.id"
                        :fixed="item.prop==='projectName'"
                         min-width="210"
                         :show-overflow-tooltip="true"
                    ></el-table-column> -->
          <el-table-column
            :min-width="
              item.prop === 'projectName' ||
              item.prop === 'pbName' ||
              item.prop === 'pcName'
                ? 230
                : 230
            "
            :label="item.label"
            :property="item.prop"
            v-for="item in headerList"
            :key="item.id"
            default-expand-all
            :fixed="item.prop === 'projectName'"
            v-if="item.isShow"
            :sortable="propEnum.includes(item.prop) ? 'custom' : false"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <div v-if="item.prop == 'projectName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row[scope.column.property]"
                  :columnName="'projectName'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'pbName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row[scope.column.property]"
                  :columnName="'pbName'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'pcName'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row[scope.column.property]"
                  :columnName="'pcName'"
                ></copyText>
              </div>
              <div v-else-if="item.prop == 'address'">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row[scope.column.property]"
                  :columnName="'address'"
                ></copyText>
              </div>
              <div v-else>
                <span>{{
                  scope.row[scope.column.property] !== 0
                    ? scope.row[scope.column.property] || '--'
                    : 0
                }}</span>
              </div>
            </template>
            <template slot="header" slot-scope="scope">
              <span>{{ item.label }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
                v-if="checkProps(item.prop)"
              >
                <i class="el-icon-warning" size="18"></i>
                <span slot="content" v-if="item.prop == 'realNameTotal'">
                  项目累计录入的实名制总人数，以身份证号去重
                </span>
                <span slot="content" v-if="item.prop == 'isSaDesc'">
                  项目录入了工资专户，即代表开设了专户
                </span>
                <span slot="content" v-if="item.prop == 'psMonthTotal'">
                  项目所有工资表中，代发到账时间在当前<br />
                  自然月1号至当前日期的代发人次之和
                </span>
                <span slot="content" v-if="item.prop == 'saMonthTotal'">
                  项目所有工资表中，代发到账时间在当前<br />
                  自然月1号至当前日期的代发金额之和
                </span>
                <span
                  slot="content"
                  v-if="item.prop == 'lastCreateSalaryTableDate'"
                >
                  以工资表是发的哪个月的工资作为比对，比如目前<br />
                  创建的发薪年月最大的工资表是2020年9月第一批次<br />
                  的工资表，则最近制作工资表月份是2020年9月
                </span>
                <span slot="content" v-if="item.prop == 'lastSalaryArriveDate'">
                  以工资表是发的哪个月的工资作为比对，比如目前状<br />
                  态为【已发放】工资表中，发薪年月最大的工资表是<br />
                  2020年9月第一批次，则最近发薪到账月份是2020年9月
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- 固定列 -->
          <!-- :fixed ="item.prop == 'projectName' ? true : false" -->
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          style="height: 52px"
        ></Pagination>
      </div>
      <!-- 项目分布 -->
      <div class="chartBox" v-show="activeName == 'second'">
        <div class="chartBoxTotal">
          满足查询条件的，共计{{ projectTotal }}个项目
        </div>
        <div class="secondaryTitle secondaryTitleTheme">项目按照地区分布</div>
        <div id="areaChart" style="height: 300px"></div>
        <div class="secondaryTitle secondaryTitleTheme">项目按照行业分布</div>
        <div id="industryChart" style="height: 300px"></div>
      </div>
    </div>
    <exportExcel
      :colmnList="exportTableCol"
      :mark="mark"
      @getExportList="getExportList"
      v-if="isShowDialog"
      :dialogFormVisible="isShowExcel"
      @closeDialog="hiddenDialog"
    ></exportExcel>
    <el-dialog
      title="正在生成数据，请稍后"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :show-close="false"
      class="loadData"
      :append-to-body="true"
    >
      <el-progress
        :percentage="percentage"
        :color="customColor"
        :show-text="false"
      ></el-progress>
    </el-dialog>
  </div>
</template>
<script>
import exportExcel from '@/components/publicCom/exportExcel'
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
import { drarProjectChart } from '../../kits/charts'
export default {
  name: 'projectDetailsReport',
  components: {
    exportExcel,
  },
  data() {
    return {
      propEnum: [
        'realNameTotal',
        'lastPunchDate',
        'salaryTotalIn',
        'saTotal',
        'lastCreateSalaryTableDate',
        'lastSalaryArriveDate',
        'depositGuaranteeAmount',
        'psEmployeeNumber',
        'psNoEmployeeNumber',
        'psEmployeeNumberScale',
        'archiveDate',
        'startDate',
        'cycle',
        'endDate',
        'total',
        'onlineTotal',
        'signedContractCount',
        'attTotal',
        'attMonthTotal',
        'attYesterdayTotal',
        'salaryTotalOut',
        'balance',
        'psTotal',
        'psMonthTotal',
        'saMonthTotal',
        'depositGuaranteeAmount',
        'depositShouldPayTotal',
        'depositPayTotal',
      ],
      tableHeight: null,
      titleText: '项目明细报表',
      showExcel: false,
      headerList: [], //列表头部数据
      tableList: [], //列表数据
      filterField: {
        areaId: '',
        industryId: '',
        status: '',
        investment: '',
        effectiveStartDate: '',
        effectiveEndDate: '',
        params: [],
        splicingType: 'and',
        startDate: '',
        searchDate: '',
        projectName: '',
        // cleanId:"",
        isParticipated: '',
      },
      startTimeTitle: '建档开始日期',
      endTimeTitle: '建档结束日期',
      startTimeTitleTwo: '开工开始日期',
      endTimeTitleTwo: '开工结束日期',
      paramsList: [],
      orderList: [], //条件筛选下拉
      date: '',
      startDate: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      loading: true,
      isShow: false, //列表加载
      percentage: 0,
      customColor: '#409eff',
      dialogVisible: false,
      startPro: '',
      requestUrl: 'api-s/cs/projectstats/base/find ',
      selectData: '',
      isShowAdd: true, //是否显示新增按钮
      // bb: [], //条件筛选--给后台传值动态显示下拉，
      colSetupTableCol: [], //列设置数据
      valData: [],
      inputLen: '',
      areaId: '', //区域
      mark: 'projectDetailReport',
      isOpenData: [],
      isSetup: [],
      exportTableCol: [], //导出报表数据
      colSetupTableTotle: [],
      isShowDialog: false,
      isShowExcel: false,
      andOr: '且',
      isEquip: [],
      washtypeOptions: [],
      activeName: 'first',
      isSignedData: [],
      projectTotal: 0,
      projectEvaluationArr: [],
      paymentStatus: [],
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
    filterHeaderList() {
      return this.headerList.filter((item) => {
        return item.isShow
      })
    },
  },
  created() {
    this.getHeaderData('0') //表头数据
    this.getHeaderData('1') //列设置数据
    this.getSelect()
    if (this.$store.state.userType == 'FINANCE') {
      this.$store.commit('SET_INFO', [
        'investmentOptions',
        [{ id: 'GOV', name: '政府投资' }],
      ])
    } else {
      this.getInvestmenttype({})
    }
    this.getStatus({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})
    // this.getWashtype();
    this.getProjectEvaluation()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    if (this.$route.query.areaId) {
      this.areaId = this.$route.query.areaId
      this.filterField.areaId = this.$route.query.areaId
      this.$refs.pagination.getTableListData()
    }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 296
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 296
      }
    })
  },
  methods: {
    checkProps(val) {
      if (
        val == 'realNameTotal' ||
        val == 'isSaDesc' ||
        val == 'psMonthTotal' ||
        val == 'saMonthTotal' ||
        val == 'lastCreateSalaryTableDate' ||
        val == 'lastSalaryArriveDate'
      ) {
        return true
      }
      return false
    },
    getStartTimeItem(index, e) {
      this.paramsList[e].minValue = index ? index : ''
      console.log(this.paramsList)
    },
    getEndTimeItem(index, e) {
      this.paramsList[e].maxValue = index ? index : ''
      console.log(this.paramsList)
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.effectiveStartDate = val
      } else {
        this.filterField.effectiveStartDate = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.effectiveEndDate = val
      } else {
        this.filterField.effectiveEndDate = ''
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.startDate = val
      } else {
        this.filterField.startDate = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.searchDate = val
      } else {
        this.filterField.searchDate = ''
      }
    },
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    getTableList(data) {
      this.percentage = 100
      var that = this
      setTimeout(function () {
        that.dialogVisible = false
      }, 200)
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
      that.paramsList.forEach(function (element, index) {
        if (element.code == 'status' && element.value.length > 0) {
          var arr = element.value.split(',')
          for (var i = 0; i < arr.length; i++) {
            var reg = /^[\']|[\']$/g
            arr[i] = arr[i].replace(reg, '')
          }
          element.value = arr
        }
      })
      this.$nextTick(() => {
        this.$refs.tableBox1.doLayout()
      })
    },
    toExportExcel() {
      // this.showExcel = true;
      this.isShowDialog = true
      this.isShowExcel = true
    },
    hiddenDialog(val) {
      // this.showExcel = false;
      this.isShowDialog = false
      this.isShowExcel = false
    },
    searchList() {
      var that = this
      that.dialogVisible = true
      that.percentage = 0

      that.paramsList.forEach(function (element, index) {
        if (element.code == 'status') {
          if (element.value.length > 0) {
            element.value = "'" + element.value.join("','") + "'"
          } else {
            element.value = ''
          }
        }
        for (var key in element) {
          if (element.name == '') {
            that.paramsList.splice(index, 1)
          }
        }
      })
      this.isShowAdd = true
      var paramsList = that.packageParams(that.paramsList)
      that.filterField.params = paramsList
      //更新echart图表
      if (this.activeName == 'second') {
        this.axios
          .post('api-s/cs/projectstats/base/projectStats', that.filterField)
          .then((res) => {
            if (!res.data.hasError) {
              const { area, industry, total } = res.data.result
              this.projectTotal = total
              let datas1 = []
              let datas2 = []
              area.forEach((item) => {
                datas1.push([item.areaName, item.amount])
              })
              industry.forEach((item) => {
                datas2.push([item.industryName, item.amount])
              })
              this.$nextTick(() => {
                if (datas1.length) {
                  drarProjectChart('#48A1FF', 'areaChart', datas1)
                }
                if (datas2.length) {
                  drarProjectChart('#03CB94', 'industryChart', datas2)
                }
              })
            }
          })
      }

      that.startPro = setInterval(function () {
        that.percentage += 30
        if (that.percentage > 70) {
          clearInterval(that.startPro)
          that.$nextTick(function () {
            that.$refs.pagination.getTableListData()
          })
        }
      }, 50)
    },
    //新增条件筛选
    addParams() {
      this.paramsList.push({
        name: '',
        value: '',
        valueType: '',
        minValue: '',
        maxValue: '',
        id: '',
        hasDefaultValue: '',
        operateType: '',
        code: '',
        maxValueCompareType: '1',
        minValueCompareType: '1',
      })
    },
    changeOrder(item) {
      for (var i = 0; i < this.orderList.length; i++) {
        var flag = true
        for (let j = 0; j < this.paramsList.length; j++) {
          if (this.orderList[i].name == this.paramsList[j].name) {
            this.paramsList[j].valueType = this.orderList[i].valueType
            this.paramsList[j].id = this.orderList[i].id
            this.paramsList[j].hasDefaultValue =
              this.orderList[i].hasDefaultValue
            this.paramsList[j].code = this.orderList[i].code
            this.paramsList[j].operateType = this.orderList[i].type
            this.orderList[i].isCheck = false
            flag = false
          }
        }
        if (flag) {
          this.orderList[i].isCheck = true
        }
      }
      if (item.hasDefaultValue == 0 || item.hasDefaultValue == '0') {
        this.getIsOpenData(item.id, item.code)
      }
    },
    del(index, value) {
      var that = this
      that.paramsList.splice(index, 1)
      var orderList = that.orderList
      for (var i = 0; i < orderList.length; i++) {
        if (orderList[i].id == value) {
          orderList[i].isCheck = true
        }
      }
    },
    // 条件筛选且或
    changeAndOr() {
      if (this.andOr == '且') {
        this.andOr = '或'
        this.filterField.splicingType = 'or'
      } else {
        this.andOr = '且'
        this.filterField.splicingType = 'and'
      }
    },
    getSelectMenuIdarr(val, newVal) {
      this.headerList = val
      this.$nextTick(() => {
        this.$refs.tableBox1.doLayout()
      })
    },
    // 获取列表头部数据
    getHeaderData(complex) {
      this.axios({
        method: 'post',
        url:
          '/api-s/dimension/head?type=' +
          'PROJECT_DETAIL' +
          '&complex=' +
          complex,
      })
        .then((res) => {
          if (complex == '0') {
            this.headerList = res.data.result
            // this.$nextTick(() => {
            //     this.$refs.tableBox1.doLayout();
            // });
          } else {
            var result = res.data.result
            //项目名称、区域、行业禁止筛选
            for (let i = 0, len = result.length; i < len; i++) {
              for (
                let j = 0, childLen = result[i].children.length;
                j < childLen;
                j++
              ) {
                var childrenData = result[i].children[j]
                if (
                  childrenData.prop == 'projectName' ||
                  childrenData.prop == 'cityName' ||
                  childrenData.prop == 'industryName' ||
                  childrenData.prop == 'countyName' ||
                  childrenData.prop == 'townName' ||
                  childrenData.prop == 'investmentDesc'
                ) {
                  childrenData.disabled = true
                }
              }
            }
            this.colSetupTableCol = JSON.parse(JSON.stringify(result)) //区别列设置和表格导出表头数据共用
            this.exportTableCol = result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取项目表头失败',
            type: 'error',
          })
        })
    },
    getSelect() {
      this.axios({
        method: 'post',
        url: '/api-s/statscondition/findbycode',
        data: {
          type: 'PROJECT_DETAIL',
          // ids: JSON.stringify(this.bb)
        },
      })
        .then((res) => {
          this.orderList = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },

    //获取条件筛选中的工资是否开设的数据
    getIsOpenData(id, code) {
      this.axios({
        method: 'post',
        url: 'api-s/conditiondefault/findbyid',
        data: { conditionId: id },
      })
        .then((res) => {
          if (code == 'is_ps') {
            this.isSetup = res.data.result
          } else if (code == 'is_sa') {
            this.isOpenData = res.data.result
          } else if (code == 'is_signed') {
            this.isSignedData = res.data.result
          } else if (code == 'status') {
            this.paymentStatus = res.data.result
          } else {
            this.isEquip = res.data.result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取工资是否开设数据失败',
            type: 'error',
          })
        })
    },
    // 导出报表
    getExportList(val) {
      var fieldArr = []
      for (var i = 0; i < this.headerList.length; i++) {
        if (this.headerList[i].isShow == true) {
          fieldArr.push(this.headerList[i].prop)
        }
      }
      fieldArr = fieldArr.join(',')
      const vm = this
      vm.paramsList.forEach(function (element, index) {
        // 缴纳状态筛选需要拼接逗号
        if (element.code == 'status') {
          if (element.value.length > 0) {
            element.value = "'" + element.value.join("','") + "'"
          } else {
            element.value = ''
          }
        }
        for (var key in element) {
          if (element.name == '') {
            vm.paramsList.splice(index, 1)
          }
        }
      })
      var paramsList = encodeURIComponent(vm.packageParams(vm.paramsList))
      if (this.tableList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-s/cs/projectstats/base/export?areaId=' +
          vm.filterField.areaId +
          '&industryId=' +
          vm.filterField.industryId +
          '&investment=' +
          vm.filterField.investment +
          '&status=' +
          vm.filterField.status +
          '&projectName=' +
          encodeURIComponent(vm.filterField.projectName) +
          '&effectiveStartDate=' +
          vm.filterField.effectiveStartDate +
          '&effectiveEndDate=' +
          vm.filterField.effectiveEndDate +
          '&params=' +
          paramsList +
          '&splicingType=' +
          vm.filterField.splicingType +
          '&startDate=' +
          vm.filterField.startDate +
          '&searchDate=' +
          vm.filterField.searchDate +
          '&isParticipated=' +
          vm.filterField.isParticipated +
          '&field=' +
          fieldArr +
          '&sort=' +
          vm.filterField.sort +
          '&sortField=' +
          vm.filterField.sortField +
          '&access_token=' +
          localStorage.getItem('access_token')
        // 缴纳状态筛选恢复数组
        vm.paramsList.forEach(function (element, index) {
          if (element.code == 'status' && element.value.length > 0) {
            var arr = element.value.split(',')
            for (var i = 0; i < arr.length; i++) {
              var reg = /^[\']|[\']$/g
              arr[i] = arr[i].replace(reg, '')
            }
            element.value = arr
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },
    getWashtype() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findwashtype',
      })
        .then((res) => {
          this.washtypeOptions = res.data.result
        })
        .catch((error) => {})
    },
    handleClick(tab) {
      if (tab.name == 'second') {
        var that = this
        that.paramsList.forEach(function (element, index) {
          for (var key in element) {
            if (element.name == '') {
              that.paramsList.splice(index, 1)
            }
          }
        })
        var paramsList = that.packageParams(that.paramsList)
        that.filterField.params = paramsList
        this.axios
          .post('api-s/cs/projectstats/base/projectStats', that.filterField)
          .then((res) => {
            if (!res.data.hasError) {
              const { area, industry, total } = res.data.result
              this.projectTotal = total
              let datas1 = []
              let datas2 = []
              area.forEach((item) => {
                datas1.push([item.areaName, item.amount])
              })
              industry.forEach((item) => {
                datas2.push([item.industryName, item.amount])
              })
              this.$nextTick(() => {
                drarProjectChart('#48A1FF', 'areaChart', datas1)
                drarProjectChart('#03CB94', 'industryChart', datas2)
              })
            }
          })
      }
    },
    getProjectEvaluation() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findLabelType',
      })
        .then((res) => {
          this.projectEvaluationArr = res.data.result
        })
        .catch((error) => {})
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  .filterBox {
    background: #fff;
    padding: 24px 0 0;
  }
  .mainConBox {
    .baseSearch {
      position: relative;
      padding-left: 102px;
      &Title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        width: 96px;
        padding-left: 24px;
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
      &Box {
        margin-left: 10px;
      }
    }
    .moreSearch {
      position: relative;
      padding-left: 112px;
      &Title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        width: 96px;
        padding-left: 24px;
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
      &List {
        margin-bottom: 22px;
        position: relative;
        &:last-of-type {
          margin-bottom: 0 !important;
        }
        &Left {
          float: left;
        }
        &Right {
          float: left;
          margin-left: 46px;
          width: 230px;
          .el-input {
            width: 100%;
          }
        }
        &Num {
          /deep/ .el-input__inner {
            width: 105px !important;
          }
        }
        .buttonBox {
          float: left;
          margin-top: 8.5px;
          margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .cable {
        position: absolute;
        left: 109px;
        top: 0;
        bottom: 0;
        margin-top: 8px;
        margin-right: 5px;
        margin-bottom: 8px;
        &:before {
          content: ' ';
          position: absolute;
          top: 0;
          left: 50%;
          width: 2px;
          height: 100%;
          overflow: hidden;
          background: #d6efe8;
        }
        > span {
          width: 18px;
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          position: relative;
          display: block;
          top: 50%;
          left: 0;
          right: 0;
          transform: translateY(-50%);
          border-radius: 3px;
          background: #d6efe8;
          color: #009588;
          font-weight: 700;
          text-align: center;
          cursor: pointer;
          user-select: none;
        }
      }

      /deep/ .el-form-item {
        margin-bottom: 0 !important;
      }
      &Box {
        width: 97.5%;
      }
    }
    .actionBox {
      position: relative;
      padding-left: 112px;
      &Add {
        line-height: 34px;
        // border-radius: 18px;
        width: auto;
        border-color: #009588;
        color: #009588;
        // padding: 0;
        padding: 0 15px;
      }
      &Search {
        position: absolute;
        top: 0;
        right: 17px;
      }
      .searchBut {
        float: right;
        margin-right: 0;
      }
    }
    .proDetailsListBox {
      padding: 24px;
      background: #fff;
      .colSetupBottom {
        margin-bottom: 24px;
        float: left;
        .colSetupBtn {
          float: left;
          margin-right: 12px;
        }
        /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
          float: right;
        }
      }
    }
  }
  .boxTop {
    margin-top: 22px;
  }
  .mL {
    margin-left: 25px;
  }

  .mLTen {
    margin-left: 10px !important;
  }
  .loadData/deep/ .el-dialog__header {
    border-bottom: none;
    text-align: center;
  }
  .searchInputWidth .el-input__inner {
    width: 280px;
  }
  /deep/.rangeWidth .el-input__inner {
    width: 70px;
  }
  /deep/.multipleWidth .el-input__inner {
    width: 458px;
  }
  // /deep/ .tabBox{
  //     margin-top: 10px;
  //     .el-tabs {
  //         background-color: #fff;
  //         padding: 0 24px;
  //     }
  //     .el-tabs__header{
  //         margin-bottom: 0;
  //     }
  //     .el-tabs__item {
  //         height: 52px;
  //         line-height: 52px;
  //         font-size: 16px;
  //           color: #666666;
  //     }
  //     .el-tabs__item.is-active{
  //         color: #009588;
  //     }
  //     .el-tabs__active-bar {
  //         background-color: #009588;
  //     }
  // }
  .chartBox {
    background-color: #fff;
    padding: 24px;
    .chartBoxTotal {
      line-height: 14px;
      font-size: 14px;
      color: #333;
      margin-bottom: 24px;
    }
  }
}
.eformTitle {
  font-size: 16px;
  width: 96px;
  padding-left: 24px;
  line-height: 16px;
  margin-bottom: 24px;
  color: #3a3a3a;
  font-weight: 700;
}
.unitSty {
  margin-top: 9px;
  margin-left: 2px;
}
.theme_default .cable {
  &:before {
    background: #3189ea !important;
    opacity: 0.2;
  }
  > span {
    color: #3189ea !important;
    background: rgba(49, 137, 234, 0.2) !important;
  }
}
@import '../../../static/css/filterArea.less';
</style>
